<script setup>
const tableData = [
  { name: "pH", value: 6.29, level: "微酸性" },
  { name: "有机质", value: 26.4, level: "高" },
  { name: "水解性氮 ", value: 105.9, level: "适宜(中等) " },
  { name: "有效磷 ", value: 32.3, level: "适宜(中等) " },
  { name: "速效钾 ", value: 267, level: "高" },
  { name: "氯离子", value: 10.7, level: "适宜(低)" },
  { name: "交换性钙", value: 2579, level: "很高" },
  { name: "有效硼", value: 0.73, level: "适宜(中等)" },
  { name: "有效锌", value: 2.07, level: "高" },
  { name: "有效锰", value: 25.98, level: "很高" },
  { name: "有效铁", value: 26.3, level: "很高" },
  { name: "交换性镁", value: 294, level: "高" },
  { name: "有效铜", value: 2.12, level: "很高" },
  { name: "全氮", value: 1.36, level: "适宜(中等)" },
];

const chemicalFertilizerList = [
  {
    name: "云87 ",
    nitrogen: 7.0,
    phosphorusPentoxide: 7.0,
    potassiumOxide: 18.9,
  },
  {
    name: "云121 ",
    nitrogen: 7.0,
    phosphorusPentoxide: 7.0,
    potassiumOxide: 18.9,
  },
  {
    name: "K326 ",
    nitrogen: 7.0,
    phosphorusPentoxide: 7.0,
    potassiumOxide: 18.9,
  },
  {
    name: "NC297 ",
    nitrogen: 7.0,
    phosphorusPentoxide: 7.0,
    potassiumOxide: 18.9,
  },
  {
    name: "红大 ",
    nitrogen: 4.0,
    phosphorusPentoxide: 4.0,
    potassiumOxide: 18.0,
  },
];

let ofList = [
  { name: "腐熟农家肥 ", dosage: 640, eqNitrogen: 1.28 },
  { name: "绿肥(苕子)", dosage: 1600, eqNitrogen: 0.8 },
  { name: "油枯饼肥", dosage: 640, eqNitrogen: 0.8 },
  { name: "秸秆还田", dosage: 640, eqNitrogen: 0.4 },
];
</script>

<template>
    <el-col :span="12" class="table-con">
      <el-row class="head" :span="24">
        <el-col>云南省烟草公司红河州公司2022年植烟土壤档案管理卡</el-col>
      </el-row>
      <el-row>
        <el-col :span="4">样品编号</el-col>
        <el-col :span="20">0.红河1265个样平均</el-col>
      </el-row>
      <el-row>
        <el-col :span="4">采样地点</el-col>
        <el-col :span="4">红河</el-col>
        <el-col :span="4">县（市）</el-col>
        <el-col :span="8">红河平均（2.5）</el-col>
        <el-col :span="4" style="font-weight:bolder">乡镇（农户）</el-col>
      </el-row>
      <el-row class="sub-head">
        <el-col :span="23" style="padding-left: 20px;">一、土壤肥力评价</el-col>
      </el-row>
      <el-row>
        <el-table :data="tableData" border height="300">
          <el-table-column prop="name" label="指标" align="center">
            <template #default="scope">
              <span>{{scope.row.name}}</span>
              <span v-if="scope.row.name=='pH'"></span>
              <span v-else-if="['有机质','全氮'].includes(scope.row.name )">(g/kg)</span>
              <span v-else>(mg/kg)</span>
            </template>
          </el-table-column>
          <el-table-column prop="value" label="检测结果" align="center"></el-table-column>
          <el-table-column prop="level" label="肥力指标" align="center"></el-table-column>
        </el-table>
      </el-row>
      <el-row class="sub-head">
        <el-col :span="23" style="padding-left: 20px;">二、化肥推荐用量</el-col>
      </el-row>
      <el-row style="height:200px">
        <el-col :span="16">
          <el-table :data="chemicalFertilizerList" border height="200">
            <el-table-column prop="name" label="品种" align="center"></el-table-column>
            <el-table-column prop="nitrogen" label="N" align="center">
            </el-table-column>
            <el-table-column prop="phosphorusPentoxide" align="center">
              <template #header="header" style="font-weight:bolder">
                <text style="font-weight:bolder"> P<sub>2</sub>O<sub>5</sub></text>
              </template>
            </el-table-column>
            <el-table-column prop="potassiumOxide" align="center">
              <template #header="header">
                <text style="font-weight:bolder">K<sub>2</sub>O</text>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="8">
          <el-row class="min-head">
            <el-col :span="24">施用说明</el-col>
          </el-row>
          <el-row class="rich-text">
            &nbsp;&nbsp;&nbsp;&nbsp;肥料的推荐量是测土平均值的推
            荐参考！受各种因素的影响，实际施
            用量要结合实践和经验调整。氮(N)、
            磷(P2O5
            )、钾(K2O)肥的推荐用量选择
            合适的烟草专用复合肥，不足的磷肥
            用过磷酸钙、钙镁磷肥等补充，不足
            的钾肥用硫酸钾补充。
          </el-row>

        </el-col>
      </el-row>
      <el-row class="sub-head">
        <el-col :span="23" style="padding-left: 20px;">三、有机肥替氮施用及土壤改良建议
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20" style="display:flex;flex-direction:row">
          <div class="table-a">
            <div class="cell-head">有机肥种类</div>
            <div class="cell">施用量（Kg/亩）</div>
            <div class="cell">替氮量（Kg/亩）</div>
          </div>
          <div class="table-a" v-for="item in ofList">
            <div class="cell-head">{{item.name}}</div>
            <div class="cell">{{item.dosage}}</div>
            <div class="cell">{{item.eqNitrogen}}</div>
          </div>
        </el-col>
        <el-col :span="4" style="padding-left:5px">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;备注：用后要扣减相应化肥氮用量。
        </el-col>
      </el-row>
      <el-row class="sub-head">
        <el-col :span="23" style="padding-left: 20px;">四、中微肥施用建议
        </el-col>
      </el-row>
      <el-row>
        <el-col style="min-height:80px"></el-col>
      </el-row>

      <el-row class="sub-head">
        <el-col :span="23" style="padding-left: 20px;">五、施肥技术建议及注意事项
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="23">1.按照烟草公司施肥方案和技术员指导，做到：配比正确、用量适当、使用时期和方法正确。
        </el-col>
        <el-col :span="23">2.肥料计算方法：商品用量=纯量÷含量。例如，要用2kg钾(K2O)，则要含钾50%的商品硫酸钾量
          =2kg÷50%=4kg。
        </el-col>
      </el-row>
    </el-col>
</template>

<style scoped lang="scss">

.table-con {
  background-color: lightgray;
  text-align: center;
  height: 100%;
  overflow-y: scroll;
  .head {
    background-color: #7bbc43;
    height: 40px;
    line-height: 40px;

    font-weight: bolder;
    text-align: center;
    font-size: 22px;
  }

  .sub-head {
    font-size: 18px;
    font-weight: bolder;
    height: 40px;
    line-height: 40px;
    text-align: left;
    background-color: #d7ad00;
  }

  .rich-text {
    border: none !important;
    font-size: 14px;
    text-align-last: left;
  }

  .min-head {
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 18px;
    font-weight: bolder;
  }

  .el-row {
    border-bottom: 1px solid black;
  }

  .el-col {
    border-left: 1px solid black;
  }
}

.table-a {
  width: 25%;
  .cell-head {
    font-size: 16px;
    font-weight: bolder;
    text-align: center;
  }
  div {
    border: 1px solid black;
  }
}
</style>
